<template>
  <div class="ui-con-box">
    <h2>Transfer 穿梭框</h2>
    <h5>基础用法</h5>
    <h3 class="mb30">基本用法</h3>
      <div class="ui-message-show mb60">
        <div class=" ui-msg-pd40">
          <form>
            <div class="rob-col-lg-10 rob-col-md-10 rob-col-sm-10 rob-col-xs-24">
              <div class="qb-select-menu-g text-left">
                <div class="rob-row">
                  <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24 qb-rg-bdsilid-g">
                    <p>可选菜单：</p>
                    <div class="qb-select-box-g">
                      <input type="checkbox" id="filled-in-box4" class="rob-checkbox-filled-in" checked="checked">
                      <label for="filled-in-box4">首页
                        <i class="qb-select-menu-g--selectIcon qb-icon-add"></i>
                      </label>
                      <div class="qb-select-box-g__select-item ">
                        <input type="checkbox" id="filled-in-box444" class="rob-checkbox-filled-in" checked="checked">
                        <label for="filled-in-box444">入金
                          <i class="qb-select-menu-g--selectIcon qb-icon-add "></i>
                        </label>
                        <input type="checkbox" id="filled-in-box555" class="rob-checkbox-filled-in" checked="checked">
                        <label for="filled-in-box555">出金
                          <i class="qb-select-menu-g--selectIcon qb-icon-add"></i>
                        </label>
                        <input type="checkbox" id="filled-in-box666" class="rob-checkbox-filled-in" checked="checked">
                        <label for="filled-in-box666">首页
                          <i class="qb-select-menu-g--selectIcon qb-icon-add"></i>
                        </label>
                        <input type="checkbox" id="filled-in-box777" class="rob-checkbox-filled-in" checked="checked">
                        <label for="filled-in-box777">123
                          <i class="qb-select-menu-g--selectIcon qb-icon-add"></i>
                        </label>
                      </div>
                    </div>

                    <input type="checkbox" id="filled-in-box5" class="rob-checkbox-filled-in" checked="checked">
                    <label for="filled-in-box5">首页</label>

                  </div>
                  <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24">
                    <p>可选菜单：</p>
                    <input type="checkbox" id="filled-in-box44" class="rob-checkbox-filled-in" checked="checked">
                    <label for="filled-in-box44">首页
                      <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                    </label>
                    <div class="qb-select-box-g__select-item">
                      <input type="checkbox" id="filled-in-box4444" class="rob-checkbox-filled-in" checked="checked">
                      <label for="filled-in-box4444">入金
                        <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                      </label>
                      <input type="checkbox" id="filled-in-box5555" class="rob-checkbox-filled-in" checked="checked">
                      <label for="filled-in-box5555">出金
                        <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                      </label>
                      <input type="checkbox" id="filled-in-box6666" class="rob-checkbox-filled-in" checked="checked">
                      <label for="filled-in-box6666">首页
                        <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                      </label>
                      <input type="checkbox" id="filled-in-box7777" class="rob-checkbox-filled-in" checked="checked">
                      <label for="filled-in-box7777">123
                        <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                      </label>
                    </div>

                    <input type="checkbox" id="filled-in-box55" class="rob-checkbox-filled-in" checked="checked">
                    <label for="filled-in-box55">首页
                      <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                    </label>
                  </div>

                </div>
              </div>

            </div>
          </form>
        </div>
        <transition name="fade">
          <div class="ui-meta" >
            <div class="ui-description">

              <code>
                radio
              </code>

            </div>
            <div class="ui-highlight-code">
              <code>
                radio
              </code>
            </div>
          </div>
        </transition>
        <div class="ui-message-show-code"></div>
      </div>
    

    <h3 class="mb30">可搜索的穿梭框</h3>
  
      <div class="ui-message-show mb60">
        <div class=" ui-msg-pd40">
          <form>
            <div class="rob-col-lg-10 rob-col-md-10 rob-col-sm-10 rob-col-xs-24">
              <div class="qb-select-menu-g text-left">
                <div class="rob-row">
                  <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24 qb-rg-bdsilid-g">
                    <div class="qb-select-box-g">
                      <p>可选菜单：</p>
                      <div class="qb-c-search-g">
                        <input type="text" class="search-inp">
                        <i class="qb-c-search-g__icon-search qb-icon-search "></i>
                      </div>
                      <label>管理员但
                        <i class="qb-select-menu-g--selectIcon qb-icon-add qb-select-menu-g--selectIcon__hover"></i>
                      </label>
                      <label>张三
                        <i class="qb-select-menu-g--selectIcon qb-icon-add qb-select-menu-g--selectIcon__hover"></i>
                      </label>
                      <label>李四
                        <i class="qb-select-menu-g--selectIcon qb-icon-add qb-select-menu-g--selectIcon__hover"></i>
                      </label>
                      <label>管理员但却未完全2
                        <i class="qb-select-menu-g--selectIcon qb-icon-add"></i>
                      </label>
                    </div>
                  </div>
                  <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24">
                    <p class="search-bt60">可选菜单：</p>
                    <label>管理员但
                      <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                    </label>
                    <label>张三
                      <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                    </label>
                    <label>李四
                      <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                    </label>
                    <label>管理员但却未完全2
                      <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                    </label>

                  </div>

                </div>
              </div>
            </div>

          </form>
        </div>
        <transition name="fade">
          <div class="ui-meta">
            <div class="ui-description">

              <code>
                radio
              </code>

            </div>
            <div class="ui-highlight-code">
              <code>
                radio
              </code>
            </div>
          </div>
        </transition>
        <div class="ui-message-show-code"></div>
      </div>
    
  
   <h3 class="mb30">角色穿梭框</h3>
  
      <div class="ui-message-show mb60">
        <div class=" ui-msg-pd40">
          <form>
            <div class="qb-select-menu-g rob-col-md-12 rol-col-sm-12 rob-col-xs-24">
             <div class="rob-row">
                        <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24 qb-rg-bdsilid-g">
                            <p>可选菜单：</p>
                            <div class="qb-select-box-g qb-bg-select-g">
                                <div class="qb-addroles-g">
                                    <input type="checkbox" id="filled-in-box" class="rob-checkbox-filled-in" checked="checked">
                                    <label for="filled-in-box">首页</label>
                                    <i class="qb-select-menu-g--selectIcon qb-icon-add2 qb-select-menu-g--selectIcon__hover"></i>
                                </div>

                                <div class="qb-select-box-g__select-item ">
                                    <div class="qb-addroles-g">
                                        <input type="checkbox" id="filled-in-boxa" class="rob-checkbox-filled-in" checked="checked">
                                        <label for="filled-in-boxa">首页</label>
                                        <i class="qb-select-menu-g--selectIcon qb-icon-add2 qb-select-menu-g--selectIcon__hover"></i>
                                        <div class="qb-addroles-g__three">
                                            <ul>
                                                <li><a class="on" href=""><i class="rob-icon-plus"></i>新增角色</a></li>
                                                <li><a href=""><i class="rob-icon-plus"></i>新增角色</a></li>
                                                <li><a href=""><i class="rob-icon-plus"></i>新增角色</a></li>
                                            </ul>


                                        </div>
                                    </div>
                                    <div class="qb-addroles-g">
                                        <input type="checkbox" id="filled-in-boxb" class="rob-checkbox-filled-in" checked="checked">
                                        <label for="filled-in-boxb">在</label>
                                        <i class="qb-select-menu-g--selectIcon qb-icon-add2"></i>
                                    </div>
                                    <div class="qb-addroles-g">
                                        <input type="checkbox" id="filled-in-boxc" class="rob-checkbox-filled-in" checked="checked">
                                        <label for="filled-in-boxc">首页</label>
                                        <i class="qb-select-menu-g--selectIcon qb-icon-add2"></i>
                                    </div>
                                    <div class="qb-addroles-g">
                                        <input type="checkbox" id="filled-in-box4" class="rob-checkbox-filled-in" checked="checked">
                                        <label for="filled-in-box4">首页</label>
                                        <i class="qb-select-menu-g--selectIcon qb-icon-add2"></i>
                                    </div>
                                </div>
                            </div>

                            <input type="checkbox" id="filled-in-box5" class="rob-checkbox-filled-in" checked="checked">
                            <label for="filled-in-box5">首页</label>

                        </div>
                        <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24">
                            <p>可选菜单：</p>
                            <div class="qb-select-box-g">
                                <div class="qb-addroles-g">
                                    <input type="checkbox" id="filled-in-box9" class="rob-checkbox-filled-in" checked="checked">
                                    <label for="filled-in-box9">首页</label>
                                    <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                                </div>

                                <div class="qb-select-box-g__select-item ">
                                    <div class="qb-addroles-g">
                                        <input type="checkbox" id="filled-in-boxa8" class="rob-checkbox-filled-in" checked="checked">
                                        <label for="filled-in-boxa8">首页</label>
                                        <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                                        <div class="qb-addroles-g__three">
                                            <ul>
                                                <li><a class="on" href=""><i class="qb-icon-delete2"></i>新增角色</a></li>
                                                <li><a href=""><i class="qb-icon-delete2"></i>新增角色</a></li>
                                                <li><a href=""><i class="qb-icon-delete2"></i>新增角色</a></li>
                                            </ul>


                                        </div>
                                    </div>
                                    <div class="qb-addroles-g">
                                        <input type="checkbox" id="filled-in-boxb7" class="rob-checkbox-filled-in" checked="checked">
                                        <label for="filled-in-boxb7">在</label>
                                        <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                                    </div>
                                    <div class="qb-addroles-g">
                                        <input type="checkbox" id="filled-in-boxc6" class="rob-checkbox-filled-in" checked="checked">
                                        <label for="filled-in-boxc6">首页</label>
                                        <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                                    </div>
                                    <div class="qb-addroles-g">
                                        <input type="checkbox" id="filled-in-box45" class="rob-checkbox-filled-in" checked="checked">
                                        <label for="filled-in-box45">首页</label>
                                        <i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i>
                                    </div>
                                </div>
                            </div>
                        </div>



                    </div>
            </div>

          </form>
        </div>
        <transition name="fade">
          <div class="ui-meta">
            <div class="ui-description">

              <code>
                radio
              </code>

            </div>
            <div class="ui-highlight-code">
              <code>
                radio
              </code>
            </div>
          </div>
        </transition>
        <div class="ui-message-show-code"></div>
      </div>
   
  
  </div>
</template>
<style lang="css" scoped>
.rob-upload .rob-upload-card .rob-upload-card-type {
  margin: 21px 24px;
}

.rob-upload .rob-upload-card:hover {
  border: 1px solid #dc0000;
}

[type="checkbox"]+label {
  display: block;
  font-size: 12px;
}
</style>
<script type="text/javascript">
export default {
  data () {
    return {
      value: '212'
    }
  }
}
</script>
